<template lang="html">
  <div id="ranking" v-if=' result.data != null '>
    <div class="title">
      全网排名
    </div>
    <div class="list-wrapper">
      <ul>
        <li :class="{'high':item.username  ==  getUser.nickname}" v-for='(item,id) in result.data' :key = 'id'>
          <div class="mingci">{{ item.rank }}</div>
          <div class="grade ">{{ item.score }}</div>
          <div class="kcal" v-if='false'>
              <span class="kcalname">卡路里:</span>
              {{ item.kcal }}
          </div>
          <div class="name one_txt_cut">{{ item.username }}</div>
        </li>
      </ul>
    </div>
  </div>

</template>
<script>
    import '../../../static/css/common.css'
    import {
        errFun,
    } from "../../tools.js";
    import api from "../../api"
    export default {
        data() {
            return {
                ranking: [{
                    "uid": "u_1491390279707",
                    "rank": 1,
                    "username": "crow",
                    "kcal": 2.6,
                    "score": 1500
                }, {
                    "uid": "u_1473672290671",
                    "rank": 2,
                    "username": "浩子",
                    "kcal": 1.1,
                    "score": 54
                }, {
                    "uid": "u_1459241225647",
                    "rank": 3,
                    "username": "Jeff Feng",
                    "kcal": 0.6,
                    "score": 52
                }, {
                    "uid": "u_1492422639877",
                    "rank": 4,
                    "username": "刚刚好",
                    "kcal": 0.0,
                    "score": 0
                }],
                result: {
                    data: null,
                    message: '',
                }
            }
        },
        created() {
            this.$store.dispatch('GET_USER_INFO');
            this.getResult();
        },
        computed: {
            getUser() {
                return this.$store.state.user
            },
        },
        // props: ['result'],
        methods: {
            //获取结果----获取排行邦德信息
            getResult() {
                var that = this;
                api.getResultBY(this.$route.params.id).then(function(result) {
                    if (result.data.code == 200) {
                        // 必须得等数据请求成功，才能渲染
                        that.delResult(result, that);
                    }
                })
            },
            // 获取到的数据的处理
            delResult(result, that) {
                if (result.data.code == 200) {
                    var newArr = []; // 进行重新的组合，因为有可能没有全部的数据
                    if (result.data.result.rank) {
                        for (var i = 0; i < result.data.result.rank.length; i++) {
                            if (result.data.result.rank[i] != null) {
                                result.data.result.rank[i].kcal = result.data.result.rank[i].kcal.toFixed(1);
                                newArr.push(result.data.result.rank[i]);
                            }
                        }
                    }
                    that.result.data = newArr;
                    // that.showstar(that);
                } else {
                    that.result.message = result.data.message;
                }
            },
        }
    }
</script>

<style lang="css">
    #ranking {
        margin-top: 40px;
        border: 1px solid #fdb602;
        width: 90%;
        margin-left: 5%;
        /*padding-top: 10px;*/
        padding-left: 20px;
        box-sizing: border-box;
        .title {
            font-size: 16px;
            color: #fdb608;
            line-height: 40px;
        }
        .list-wrapper {
            width: 100%;
        }
        .list-wrapper ul li {
            width: 100%;
            height: 40px;
            padding-left: 15px;
            margin-bottom: 15px;
            box-sizing: border-box;
            position: relative;
            color: #fdb602
        }
        /*.list-wrapper ul li:nth-child(1) {
            color: rgba(255, 255, 255, .8)
        }*/
        .list-wrapper ul li.high {
            color: rgba(255, 255, 255, 1);
            margin-left: -10px;
        }
        .list-wrapper ul li.high .mingci {
            font-size: 22px;
            /*font-weight: 700;
            position: absolute;
            bottom: 3px;
            left: 0;*/
        }
        .list-wrapper ul li.high .grade {
            font-size: 30px;
        }
        .list-wrapper ul li.high .kcal {
            font-size: 22px;
        }
        .list-wrapper ul li.high .name {
            font-size: 14px;
            font-weight: 700;
            left: 73%;
        }
        /*.list-wrapper ul li:nth-child(3) {
            color: rgba(255, 255, 255, .6)
        }*/
        /*.list-wrapper ul li:nth-child(4) {
            color: rgba(255, 255, 255, .4)
        }*/
        /*.list-wrapper ul li:nth-child(5) {
            color: rgba(255, 255, 255, .2)
        }*/
        .list-wrapper ul li .mingci {
            box-sizing: border-box;
            font-size: 16px;
            font-weight: 700;
            position: absolute;
            bottom: 3px;
            left: 8%;
        }
        .list-wrapper ul li .grade {
            font-size: 27px;
            font-weight: 700;
            position: absolute;
            bottom: 0;
            left: 35%;
        }
        .list-wrapper ul li .kcal {
            font-size: 16px;
            font-weight: 700;
            position: absolute;
            bottom: 0;
            left: 55%;
        }
        .list-wrapper ul li .kcal .kcalname {
            font-size: 12px;
            font-weight: 400;
            position: absolute;
            top: -14px;
            left: -3px;
            width: 40px;
        }
        .list-wrapper ul li .name {
            width: 65px;
            font-size: 12px;
            position: absolute;
            bottom: 10px;
            left: 73%;
            overflow: hidden;
            display: inline-block;
        }
    }
</style>